<template>
  <transition name="fade">
    <div class="mark" v-if="roomState.switchGameOpen" @click="closeGameOpen"></div>
  </transition>
  <transition name="right">
    <div class="game-rightbar" v-if="roomState.switchGameOpen">
      <div class="game-return" @click="$router.push('/room')">
        <img class="w-[19px] h-[19px]" src="@/assets/images/room/switch-left.png" />
        <span class="text-[15px] text-blue ml-[5px]">返回大厅</span>
      </div>
      <div class="game-list flex-1 overflow-auto">
        <template v-for="item in gameTotal">
          <right-card :info="item"></right-card>
        </template>
      </div>
    </div>
  </transition>
</template>
<script lang="ts" setup>
import rightCard from "./room-rightcard.vue";

import { useGameStore } from "@/store/modules/game";
import { storeToRefs } from "pinia";

const roomState = inject<RoomState>("roomState") as RoomState;
const gameStore = useGameStore();
const { gameTotal } = storeToRefs(gameStore);
// 关闭切换游戏
const closeGameOpen = () => {
  roomState.switchGameOpen = false;
};
// 监听切换游戏
watch(
  () => roomState.switchGameOpen,
  val => {
    if (val) {
      gameStore.actionGameList();
    }
  }
);
</script>
<style lang="scss" scoped>
.game-rightbar {
  width: 252px;
  position: absolute;
  height: calc(100% - 56px - 130px);
  right: 0;
  top: 138px;
  z-index: 1000;
  background-color: #fff;
  border: 1px solid #d5d5d5;
  border-right: 0;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mark {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.game-list {
  touch-action: pan-y;
}
.right-enter-from,
.right-leave-to {
  transform: translateX(100%);
}

.right-enter-to,
.right-leave-from {
  transform: translateX(0%);
}

.right-enter-active,
.right-leave-active {
  transition: all 0.3s ease-in-out;
}
</style>
<style lang="css" scoped>
.game-return {
  @apply h-[35px] flex justify-center items-center;
  @apply border-b-[1px] border-solid border-[#eee];
}
.game-item {
  @apply flex py-[11px] ml-[10px] pr-[15px] items-center;
  @apply border-b-[1px] border-solid border-[#eee];
}
</style>
